<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:fragment="commonsHeader">

    <link th:href="@{/css/style.css}" rel="stylesheet">
    <link th:href="@{/css/style-responsive.css}" rel="stylesheet">
</head>
<body>

<!-- left side start-->
<div id="leftMenu" class="left-side sticky-left-side">

    <!--logo and iconic logo start-->
    <div class="logo">
        <a th:href="@{/main.html}">
            <img src="images/logo.png" alt=""></a>
    </div>

    <div class="logo-icon text-center">
        <a th:href="@{/main.html}">
            <img src="images/logo_icon.png" alt=""></a>
    </div>
    <!--logo and iconic logo end-->

    <div class="left-side-inner">

        <!-- 头部用户个人操作 -->
        <div class="visible-xs hidden-sm hidden-md hidden-lg">
            <div class="media logged-user">
                <img alt="" src="images/photos/user-avatar.png" class="media-object">
                <div class="media-body">
                    <h4>
                        <a href="#">123</a>
                    </h4>
                    <span>"你好啊..."</span>
                </div>
            </div>

            <h5 class="left-nav-title">账户信息</h5>
            <ul class="nav nav-pills nav-stacked custom-nav">
                <li>
                    <a href="#"> <i class="fa fa-user"></i>
                        <span>用户资料</span>
                    </a>
                </li>
                <li>
                    <a href="#"> <i class="fa fa-cog"></i>
                        <span>设置</span>
                    </a>
                </li>
                <li>
                    <a href="#">
                        <i class="fa fa-sign-out"></i>
                        <span>退出</span>
                    </a>
                </li>
            </ul>
        </div>

        <!--侧边栏导航开始-->
        <ul class="nav nav-pills nav-stacked custom-nav">
            <li class="menu-list">
                <a href="index.html">
                    <i class="fa fa-home"></i>
                    <span>指示板</span>
                </a>
                <ul class="sub-menu-list">
                    <li class="">
                        <a href="index_alt.html">指示板 1</a>
                    </li>
                    <li>
                        <a href="index.html">指示板 2</a>
                    </li>
                </ul>
            </li>
            <li class="menu-list">
                <a href="">
                    <i class="fa fa-laptop"></i>
                    <span>布局</span>
                </a>
                <ul class="sub-menu-list">
                    <li>
                        <a href="blank_page.html">空白页</a>
                    </li>
                    <li>
                        <a href="boxed_view.html">盒装页面  居中显示</a>
                    </li>
                    <li>
                        <a href="leftmenu_collapsed_view.html">缩小侧边栏</a>
                    </li>
                    <li>
                        <a href="horizontal_menu.html">水平菜单</a>
                    </li>

                </ul>
            </li>
            <li class="menu-list">
                <a href="">
                    <i class="fa fa-book"></i>
                    <span>UI 元素</span>
                </a>
                <ul class="sub-menu-list">
                    <li>
                        <a href="general.html">普通样式</a>
                    </li>
                    <li>
                        <a href="buttons.html">按钮样式</a>
                    </li>
                    <li>
                        <a href="tabs-accordions.html">选项卡</a>
                    </li>
                    <li>
                        <a href="typography.html">字体排版</a>
                    </li>
                    <li>
                        <a href="slider.html">滑块</a>
                    </li>
                    <li>
                        <a href="panels.html">折叠面板</a>
                    </li>
                    <li>
                        <a href="widgets.html">小部件</a>
                    </li>
                </ul>
            </li>
            <li class="menu-list">
                <a href="">
                    <i class="fa fa-cogs"></i>
                    <span>组件</span>
                </a>
                <ul class="sub-menu-list">
                    <li>
                        <a href="grids.html">网格</a>
                    </li>
                    <li>
                        <a href="gallery.html">图片画廊</a>
                    </li>
                    <li>
                        <a href="calendar.html">日历</a>
                    </li>
                    <li>
                        <a href="tree_view.html">树状图</a>
                    </li>
                    <li>
                        <a href="nestable.html">可拖动组件</a>
                    </li>

                </ul>
            </li>

            <li>
                <a href="fontawesome.html">
                    <i class="fa fa-bullhorn"></i>
                    <span>图标</span>
                </a>
            </li>

            <li class="menu-list">
                <a href="">
                    <i class="fa fa-envelope"></i>
                    <span>邮件</span>
                </a>
                <ul class="sub-menu-list">
                    <li>
                        <a href="mail.html">收件箱</a>
                    </li>
                    <li>
                        <a href="mail_compose.html">写邮件</a>
                    </li>
                    <li>
                        <a href="mail_view.html">查看邮件</a>
                    </li>
                </ul>
            </li>

            <li class="menu-list">
                <a href="">
                    <i class="fa fa-tasks"></i>
                    <span>表单</span>
                </a>
                <ul class="sub-menu-list">
                    <li>
                        <a th:href="@{/form_layouts}">表单布局</a>
                    </li>
                    <li>
                        <a href="form_advanced_components.html">先进的组件</a>
                    </li>
                    <li>
                        <a href="form_wizard.html">表单向导</a>
                    </li>
                    <li>
                        <a href="form_validation.html">表单验证</a>
                    </li>
                    <li>
                        <a href="editors.html">富文本</a>
                    </li>
                    <li>
                        <a href="inline_editors.html">内联编辑</a>
                    </li>
                    <li>
                        <a href="pickers.html">选择器组件</a>
                    </li>
                    <li>
                        <a href="dropzone.html">文件上传</a>
                    </li>
                </ul>
            </li>
            <li class="menu-list">
                <a href="">
                    <i class="fa fa-bar-chart-o"></i>
                    <span>图表</span>
                </a>
                <ul class="sub-menu-list">
                    <li>
                        <a href="flot_chart.html">Flot 图表</a>
                    </li>
                    <li>
                        <a href="morris.html">莫里斯图表</a>
                    </li>
                    <li>
                        <a href="chartjs.html">Chartjs</a>
                    </li>
                    <li>
                        <a href="c3chart.html">C3 图表</a>
                    </li>
                </ul>
            </li>
            <li class="menu-list  nav-active">
                <a href="#">
                    <i class="fa fa-th-list"></i>
                    <span>数据表</span>
                </a>
                <ul class="sub-menu-list">
                    <li class="active">
                        <a th:href="basic_table">基本表</a>
                    </li>
                    <li>
                        <a th:href="dynamic_table">先进的表</a>
                    </li>
                    <li>
                        <a th:href="responsive_table">响应表</a>
                    </li>
                    <li>
                        <a th:href="editable_table">可编辑表</a>
                    </li>
                </ul>
            </li>

            <li class="menu-list">
                <a href="#">
                    <i class="fa fa-map-marker"></i>
                    <span>地图</span>
                </a>
                <ul class="sub-menu-list">
                    <li>
                        <a href="google_map.html">谷歌地图</a>
                    </li>
                    <li>
                        <a href="vector_map.html">矢量地图</a>
                    </li>
                </ul>
            </li>
            <li class="menu-list">
                <a href="">
                    <i class="fa fa-file-text"></i>
                    <span>其他页面</span>
                </a>
                <ul class="sub-menu-list">
                    <li>
                        <a href="profile.html">配置文件</a>
                    </li>
                    <li>
                        <a href="invoice.html">发票</a>
                    </li>
                    <li>
                        <a href="pricing_table.html">定价表</a>
                    </li>
                    <li>
                        <a href="timeline.html">时间轴</a>
                    </li>
                    <li>
                        <a href="blog_list.html">博客列表</a>
                    </li>
                    <li>
                        <a href="blog_details.html">博客详情</a>
                    </li>
                    <li>
                        <a href="directory.html">目录</a>
                    </li>
                    <li>
                        <a href="chat.html">聊天</a>
                    </li>
                    <li>
                        <a href="404.html">404 错误</a>
                    </li>
                    <li>
                        <a href="500.html">500 错误</a>
                    </li>
                    <li>
                        <a href="registration.html">注册页面</a>
                    </li>
                    <li>
                        <a href="lock_screen.html">屏幕锁</a>
                    </li>
                </ul>
            </li>
            <li>
                <a href="login.html">
                    <i class="fa fa-sign-in"></i>
                    <span>登陆页面</span>
                </a>
            </li>

        </ul>
        <!--侧边栏导航结束--> </div>
</div>
<!-- 左侧结束-->


<!-- 头部分开始-->
<div id="header" class="header-section">

    <!--开关按钮开始-->
    <a class="toggle-btn">
        <i class="fa fa-bars"></i>
    </a>
    <!--开关按钮结束-->

    <!--搜索开始-->
    <form class="searchform" action="http://view.jqueryfuns.com/2014/4/10/7_df25ceea231ba5f44f0fc060c943cdae/index.html" method="post">
        <input type="text" class="form-control" name="keyword" placeholder="Search here..." />
    </form>
    <!--搜索结束-->

    <!--通知菜单开始 -->
    <div class="menu-right">
        <ul class="notification-menu">
            <li>
                <a href="#" class="btn btn-default dropdown-toggle info-number" data-toggle="dropdown">
                    <i class="fa fa-tasks"></i>
                    <span class="badge">8</span>
                </a>
                <div class="dropdown-menu dropdown-menu-head pull-right">
                    <h5 class="title">你有八个未解决的问题</h5>
                    <ul class="dropdown-list user-list">
                        <li class="new">
                            <a href="#">
                                <div class="task-info">
                                    <div>数据库更新</div>
                                </div>
                                <div class="progress progress-striped">
                                    <div style="width: 40%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="40" role="progressbar" class="progress-bar progress-bar-warning">
                                        <span class="">40%</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="new">
                            <a href="#">
                                <div class="task-info">
                                    <div>test2</div>
                                </div>
                                <div class="progress progress-striped">
                                    <div style="width: 90%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="90" role="progressbar" class="progress-bar progress-bar-success">
                                        <span class="">90%</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="task-info">
                                    <div>test2</div>
                                </div>
                                <div class="progress progress-striped">
                                    <div style="width: 66%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="66" role="progressbar" class="progress-bar progress-bar-info">
                                        <span class="">66%</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="task-info">
                                    <div>test2</div>
                                </div>
                                <div class="progress progress-striped">
                                    <div style="width: 33%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="33" role="progressbar" class="progress-bar progress-bar-danger">
                                        <span class="">33%</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li>
                            <a href="#">
                                <div class="task-info">
                                    <div>test2</div>
                                </div>
                                <div class="progress progress-striped">
                                    <div style="width: 80%" aria-valuemax="100" aria-valuemin="0" aria-valuenow="80" role="progressbar" class="progress-bar">
                                        <span class="">80%</span>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="new">
                            <a href="">看到所有未解决任务</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="#" class="btn btn-default dropdown-toggle info-number" data-toggle="dropdown">
                    <i class="fa fa-envelope-o"></i>
                    <span class="badge">5</span>
                </a>
                <div class="dropdown-menu dropdown-menu-head pull-right">
                    <h5 class="title">你有5封邮件</h5>
                    <ul class="dropdown-list normal-list">
                        <li class="new">
                            <a href="">
                                            <span class="thumb">
                                                <img src="images/photos/user1.png" alt="" />
                                            </span>
                                <span class="desc">
                                                <span class="name">
                                                    管理员
                                                    <span class="badge badge-success">new</span>
                                                </span>
                                                <span class="msg">测试数据...</span>
                                            </span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                            <span class="thumb">
                                                <img src="images/photos/user2.png" alt="" />
                                            </span>
                                <span class="desc">
                                                <span class="name">管理员</span>
                                                <span class="msg">测试数据...</span>
                                            </span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                            <span class="thumb">
                                                <img src="images/photos/user3.png" alt="" />
                                            </span>
                                <span class="desc">
                                                <span class="name">管理员</span>
                                                <span class="msg">测试数据...</span>
                                            </span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                            <span class="thumb">
                                                <img src="images/photos/user4.png" alt="" />
                                            </span>
                                <span class="desc">
                                                <span class="name">管理员</span>
                                                <span class="msg">测试数据...</span>
                                            </span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                            <span class="thumb">
                                                <img src="images/photos/user5.png" alt="" />
                                            </span>
                                <span class="desc">
                                                <span class="name">管理员</span>
                                                <span class="msg">测试数据...</span>
                                            </span>
                            </a>
                        </li>
                        <li class="new">
                            <a href="">阅读所有的邮件</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="#" class="btn btn-default dropdown-toggle info-number" data-toggle="dropdown">
                    <i class="fa fa-bell-o"></i>
                    <span class="badge">4</span>
                </a>
                <div class="dropdown-menu dropdown-menu-head pull-right">
                    <h5 class="title">通知</h5>
                    <ul class="dropdown-list normal-list">
                        <li class="new">
                            <a href="">
                                            <span class="label label-danger">
                                                <i class="fa fa-bolt"></i>
                                            </span>
                                <span class="name">服务器# 1超载.</span> <em class="small">34 mins</em>
                            </a>
                        </li>
                        <li class="new">
                            <a href="">
                                            <span class="label label-danger">
                                                <i class="fa fa-bolt"></i>
                                            </span>
                                <span class="name">服务器# 1超载.</span> <em class="small">1 hrs</em>
                            </a>
                        </li>
                        <li class="new">
                            <a href="">
                                            <span class="label label-danger">
                                                <i class="fa fa-bolt"></i>
                                            </span>
                                <span class="name">服务器# 1超载.</span>
                                <em class="small">4 hrs</em>
                            </a>
                        </li>
                        <li class="new">
                            <a href="">
                                            <span class="label label-danger">
                                                <i class="fa fa-bolt"></i>
                                            </span>
                                <span class="name">服务器# 1超载.</span>
                                <em class="small">4 hrs</em>
                            </a>
                        </li>
                        <li class="new">
                            <a href="">看到所有的通知</a>
                        </li>
                    </ul>
                </div>
            </li>
            <li>
                <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                    <img src="images/photos/user-avatar.png" alt="" />
                    [[${session.loginUser.username}]]
                    <span class="caret"></span>
                </a>
                <ul class="dropdown-menu dropdown-menu-usermenu pull-right">
                    <li>
                        <a href="#">
                            <i class="fa fa-user"></i>
                            用户信息
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="fa fa-cog"></i>
                            设置
                        </a>
                    </li>
                    <li>
                        <a th:href="@{/loginOut}">
                            <i class="fa fa-sign-out"></i>
                            登出
                        </a>
                    </li>
                </ul>
            </li>

        </ul>
    </div>
    <!--通知菜单结束 --> </div>
<!-- 头部分结束-->



<div id="commonsScript">
    <!-- Placed js at the end of the document so the pages load faster -->
    <script th:src="@{/js/jquery-1.10.2.min.js}"></script>
    <script th:src="@{/js/jquery-ui-1.9.2.custom.min.js}"></script>
    <script th:src="@{/js/jquery-migrate-1.2.1.min.js}"></script>
    <script th:src="@{/js/bootstrap.min.js}"></script>
    <script th:src="@{/js/modernizr.min.js}"></script>
    <script th:src="@{/js/jquery.nicescroll.js}"></script>
    <!--common scripts for all pages-->
    <script th:src="@{/js/scripts.js}"></script>
</div>

</body>
</html>